<template>
  <div id="member-vip-home-page" :style="{
     height: (this.getWinSize().height-(this.getSafeArea().top))+'px',
    top:(this.getSafeArea().top)+'px'
  }">
    <div style="position: fixed; bottom: 0px; width: 100%; text-align: center; background: rgba(0,0,0,.2); height: 40px;line-height: 35px; z-index: 10; font-size: 20px; color: #FFFFFF" @click="$router.back()">
      <el-button type="danger">返回个人中心</el-button>
    </div>
    <div id="top-box">

      <!--头部板块1-->
      <div class="box1">
        <div class="left">
          <img v-if="userInfo.icon" :src="userInfo.icon" style="width: 41px; height: 41px;" alt="">
        </div>
        <div class="middle">
          <div class="line1">
            <span class="nickname" v-text="userInfo.nickname"></span>
            &nbsp;&nbsp;&nbsp;
            <member-level-icon v-if="userInfo.id>0" :level="userInfo.level" :is-vip="userInfo.isVip"/>
          </div>
          <div class="line2" v-if="userInfo.level===0">
            您暂未开通App会员
          </div>
          <div class="line2" v-if="userInfo.id>0 && userInfo.level>0 && nextLevelScore>0">
            <el-progress :percentage="(nextLevelPercent-0)"></el-progress>
            <span class="next-level-score-info" v-if="userInfo.isVip">距离下一级: {{ nextLevelScore }}</span>
            <span class="next-level-score-info sub" v-if="!userInfo.isVip">
              每日减少:  -{{ getSubScore() }}
            </span>
          </div>
        </div>
        <div class="right">
          <el-button @click="buyVip" :type="userInfo.level===0?'warning':'primary'" icon="el-icon-s-finance">
            {{ userInfo.level===0?'开通会员':'续费会员' }}
          </el-button>
          <div class="money">
            <span class="value" v-text="ToMoney(dict.VipMonthlyMoneyList['1'])"></span>/月
          </div>
          <div v-if="userInfo.vipTime && userInfo.level>0"><span style="color: #ffb3a0">有效期:</span> <span style="color: #ffb3a0;" v-text="userInfo.vipTime.substring(0,10)"></span></div>
        </div>
      </div>
      <!--头部板块2-->
      <div class="box2">
        <div class="content">
          <div class="item" @click="$router.push('/ExLogList')">
            <div class="name">当前成长值</div>
            <div class="value">
              <span v-text="userInfo.ex"></span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>

          <div class="item" @click="$router.push('/MemberLog?type=scoreLog')">
            <div class="name">当前积分</div>
            <div class="value">
              <span v-text="userInfo.score"></span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>

          <div class="item" @click="$router.push('/OrderList?isScoreOrder=1')">
            <div class="name">兑换记录</div>
            <div class="value">
              <span v-text="scoreTaskCompleteInfo.Order.count?scoreTaskCompleteInfo.Order.count:0"></span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--内容板块1-->
    <div class="content-box">
      <div class="title">
        <span class="text">每月7天签到奖励</span>
        <span class="more-button" @click="$router.push('/MemberSignMonth')">更多.. </span>
        <div class="c"></div>
      </div>
      <div class="content sign-list">
        <div class="item" v-for="(score,index) in dict.VipMonthlySignList" :key="index" :style="{
          height:(signItemWidth+10)+'px',
          width:(signItemWidth-5)+'px',
        }">
          <div class="circle"  @click="$router.push('/MemberSignMonth')" v-if="index>userInfo.currMonthSignNums" :style="{
          height:(signItemCircleWidth-4)+'px',
          lineHeight:(signItemCircleWidth-4)+'px',
          width:(signItemCircleWidth-4)+'px',
        }">+{{ score }}</div>

          <div class="circle" :class="{today:userInfo.currDaySignNums===0}" @click="function(){ if(userInfo.currDaySignNums===0){sign()}else{$router.push('/MemberSignMonth')} }" v-if="index===userInfo.currMonthSignNums" :style="{
          height:(signItemCircleWidth-4)+'px',
          lineHeight:(signItemCircleWidth-4)+'px',
          width:(signItemCircleWidth-4)+'px',
        }" v-text="userInfo.currDaySignNums===0?'签到':'+'+score">
          </div>

          <div class="circle curr"  @click="$router.push('/MemberSignMonth')" v-if="index<=userInfo.currMonthSignNums-1" :style="{
          height:(signItemCircleWidth-4)+'px',
          lineHeight:(signItemCircleWidth-4)+'px',
          width:(signItemCircleWidth-4)+'px',
        }">已签到</div>

          <div class="day-text" v-text="index===userInfo.currMonthSignNums-1?'今天':'第'+(index+1)+'天'"></div>
        </div>
        <div class="c"></div>
      </div>
      <div class="c"></div>
    </div>

    <div class="content-box">
      <div class="title">
        积分兑换
      </div>
      <div class="content win-mall">
        <div class="item mall sign"  @click="showActive('mall')" :style="{
          height:Math.ceil(this.getWinSize().width*0.2)+'px'
        }">
          <div class="name">积分商城</div>
          <div class="info">积分兑换好物</div>
        </div>
<!--        <div class="item win" @click="showActive('win')" :style="{
          height:Math.ceil(this.getWinSize().width*0.2)+'px'
        }">
          <div class="name">积分抽奖</div>
          <div class="info">积分抽奖活动</div>
        </div>-->
        <div class="c"></div>
      </div>
      <div class="c"></div>
    </div>

    <div class="content-box" style="padding-bottom: 45px;">
      <div class="title">
        积分任务
      </div>
      <div class="content task">
        <div class="item" v-for="(item,index) in taskList" :key="index">
          <div class="left">
            <div class="title" v-text="item.title"></div>
            <div class="des" v-text="item.des"></div>
          </div>
          <div class="right">
            <el-button type="danger" v-text="item.buttonName" @click="$router.push(item.url)"></el-button>
            <span>已获得积分: {{ scoreTaskCompleteInfo[item.key].score }}</span>
          </div>
          <div class="c"></div>
        </div>
      </div>
      <div class="c"></div>
    </div>



<!--    <member-level-icon :level="1"/>-->
<!--    <member-level-icon :level="2"/>-->
<!--    <member-level-icon :level="3"/>-->

  </div>
</template>

<script>
import MemberLevelIcon from '../common/MemberLevelIcon'
import LevelInfoBox from '../common/LevelInfoBox'
export default {
  name: 'MemberVipHome',
  components: {LevelInfoBox, MemberLevelIcon},
  mounted () {
    let $this=this
    setTimeout(function () {
      $this.getInfo()
    },330)
    setTimeout(function () {
      $this.completeTaskInfo()
    },130)
  },
  data:function () {
    return {
      nextLevelPercent:0,
      nextLevelScore:0,
      signItemWidth:Math.ceil(this.getWinSize().width*0.14),
      signItemCircleWidth:Math.ceil(this.getWinSize().width*0.14)-10,
      taskList:[
        {
          title:'推广用户注册',
          des:'邀请新用户成功注册【赠送积分200】',
          key:'InvitationMemberRegister',
          buttonName:'前去推广',
          url:'/MemberPromotion',
        },
        {
          title:'商城购物',
          buttonName:'前去购物',
          des:'商城购物成功，交易完成赠送积分',
          key:'CompleteOrder',
          url:'/',
        },
      ],
      userInfo:{
        "id": 0,
        "username": "",
        "nickname": "—",
        "sex": "男",
        "birthday": "1993-09-19",
        "money": 45977,
        "commission": 0,
        "icon": "",
        "invitationCode": "",
        "level": 0,
        "score": 8,
        "orderNums": {
          "needReplyNums": 1,
          "completedNums": 1,
          "needPayNums": 0,
          "count": 7,
          "needSendNums": 6,
          "applyNums": 1,
          "needReceiveNums": 0
        },
        "bindingShopNums": 0,
        "ex": 0,
        "isCancel": {
          "name": "否",
          "id": 0
        },
        "currMonthSignNums": 0,
        "currDaySignNums": 0,
        "currMonthSignDayList": [],
        "cancelTime": null
      },
      scoreTaskCompleteInfo:{CompleteOrder:{count:0,score:0,},InvitationMemberRegister:{count:0,score:0,},Order:{count:0,score:0,}}
    }
  },
  methods:{
    sign: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Member/sign', {}, function (data) {
        $this.$message.success('签到成功!')
        $this.getInfo()
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    completeTaskInfo: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Member/scoreTaskCompleteInfo', {}, function (data) {
        $this.scoreTaskCompleteInfo=data
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    getSubScore:function () {
      var levelMap={}
      dict.VipLevelList.forEach(function (value, index) {
        levelMap[value.level]=value
      })
      var currLevel=levelMap[this.userInfo.level]
      return currLevel.dailyAddEx*dict.VipExpireSubScore
    },
    buyVip:function () {
      let $this=this
      $this.bus.$emit('BuyVipDialogCallBus',function () {
        // $this.$message.success('【会员包月服务】购买成功')
        $this.getInfo()
      },$this.userInfo)
    },
    getInfo: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Member/info', {}, function (data) {
        $this.userInfo=data
        $this.calcLevelInfo()
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    calcLevelInfo:function () {
      var levelMap={}
      dict.VipLevelList.forEach(function (value, index) {
        levelMap[value.level]=value
      })
      var currLevel=levelMap[this.userInfo.level]
      var nextLevel=levelMap[this.userInfo.level+1]
      if (!nextLevel){
        this.nextLevelPercent=0
        this.nextLevelScore=0
      }
      var diffEx=(nextLevel.ex-currLevel.ex).toFixed(2)-0
      this.nextLevelScore=(nextLevel.ex-this.userInfo.ex).toFixed(2)-0
      this.nextLevelPercent=((this.userInfo.ex/nextLevel.ex).toFixed(2)*100).toFixed(0)
      this.$forceUpdate()
    },
    showActive:function (type) {
      if (type==='win'){
        return this.$message.info('功能暂未开启...')
      }
      this.$router.push('/MemberScoreMall')
    },
  }
}
</script>

<style scoped>

</style>
